import 'package:flutter/material.dart';
import 'package:flutter_bilibili/mock/video_detail_data.dart';
import 'package:flutter_bilibili/model/video_detail_mo.dart';
import 'package:flutter_bilibili/model/video_mo.dart';
import 'package:flutter_bilibili/widget/hi_navigation_bar.dart';
import 'package:flutter_bilibili/widget/hi_tab.dart';
import 'package:flutter_bilibili/widget/video_expandable_content.dart';
import 'package:flutter_bilibili/widget/video_player.dart';
import 'package:flutter_bilibili/widget/video_toolbar.dart';
import 'package:flutter_bilibili/widget/video_user.dart';
import 'package:get/get.dart';

class VideoDetailPage extends StatefulWidget {
  const VideoDetailPage({super.key});

  @override
  State<VideoDetailPage> createState() => _VideoDetailPageState();
}

class _VideoDetailPageState extends State<VideoDetailPage>
    with TickerProviderStateMixin {
  late VideoMo videoMo;
  late TabController _tabController;
  List<String> tabList = ['简介', '评论'];
  late VideoDetailMo videoDetailInfo;

  @override
  void initState() {
    super.initState();
    videoDetailInfo = VideoDetailMo.fromJson(videoDetailData);
    setState(() {
      videoMo = Get.arguments;
    });
    _tabController = TabController(length: tabList.length, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          HiNavigationBar(
            height: 0,
            child: Container(),
          ),
          _buildVideoView(),
          _buildTabNavigation(),
          Flexible(
            child: TabBarView(
              controller: _tabController,
              children: [
                _buildDetailList(),
                const Text('敬请期待...'),
              ],
            ),
          )
        ],
      ),
    );
  }

  /// 视频播放器区域
  _buildVideoView() {
    return VideoPlayer(
      videoMo.url,
      cover: videoMo.cover,
      overlayUI: videoAppBar(),
    );
  }

  /// tab切换区域
  _buildTabNavigation() {
    return Material(
      elevation: 5, // 阴影大小
      shadowColor: Colors.grey[100],
      child: Container(
        alignment: Alignment.centerLeft,
        padding: const EdgeInsets.only(left: 20),
        height: 40,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            _tabBar(),
            const Padding(
              padding: EdgeInsets.only(right: 20),
              child: Icon(
                Icons.live_tv_rounded,
                color: Colors.grey,
              ),
            ),
          ],
        ),
      ),
    );
  }

  _tabBar() {
    List<Widget> tabs = tabList.map((tab) {
      return Tab(text: tab);
    }).toList();

    return HiTab(
      tabs,
      controller: _tabController,
    );
  }

  /// 简介详情
  _buildDetailList() {
    return ListView(
      padding: const EdgeInsets.all(0),
      children: [
        ..._buildContents(),
      ],
    );
  }

  _buildContents() {
    return [
      VideoUser(
        owner: videoMo.owner,
      ),
      VideoExpandableContent(videoMo: videoMo),
      VideoToolbar(
        videoDetailMo: videoDetailInfo,
        onLike: _onLike,
        onUnlike: _onUnlike,
        onCoin: _onCoin,
        onFavorite: _onFavorite,
        onShare: _onShare,
      )
    ];
  }

  /// 喜欢回调
  void _onLike() {}

  /// 不喜欢回调
  void _onUnlike() {}

  /// 金币回调
  void _onCoin() {}

  /// 收藏回调
  void _onFavorite() {}

  /// 分享回调
  void _onShare() {}
}

/// 自定义视频播放器顶部
videoAppBar() {
  return Container(
    padding: const EdgeInsets.only(right: 8),
    decoration: const BoxDecoration(
      gradient: LinearGradient(
        colors: [Colors.black87, Colors.black54, Colors.black38],
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
      ),
    ),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        BackButton(
          color: Colors.white,
          onPressed: () {
            Get.back();
          },
        ),
        const Row(
          children: [
            Icon(
              Icons.live_tv_rounded,
              color: Colors.white,
              size: 20,
            ),
            Padding(
              padding: EdgeInsets.only(left: 12),
              child: Icon(
                Icons.more_vert_rounded,
                color: Colors.white,
                size: 20,
              ),
            )
          ],
        ),
      ],
    ),
  );
}
